<!--
 * @Description: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-06-10 14:46:42
-->
<template>
  <div class="quickEnter-container">
    <span
      v-for="quickEnter in quickEnterArr"
      :key="quickEnter.code"
      class="dile-group-title"
      @click="initLayer(quickEnter.code)"
    >
      {{ quickEnter.label }}
    </span>
    <!-- 快捷入口弹框实例 -->
    <QuickEnterLayer ref="quickEnterLayerRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { useI18n } from "vue-i18n";
import QuickEnterLayer from "./quickEnter-layer/index.vue";
import DileTooltip from "@/components/dile-tooltip/index.vue";

let { t } = useI18n();
/**
 * @Author: xzh
 * @Description: 快捷入口弹框实例
 * @Param:
 */
let quickEnterLayerRef = ref<any>();

/**
 * @Author: xzh
 * @Description: 快捷入口
 * @Param:
 */
let quickEnterArr = computed(() => [
  {
    code: "equipArchives",
    label: t(`page.dataV.quickEnterArr.equipArchives`),
  },
  {
    code: "spareInfo",
    label: t(`page.dataV.quickEnterArr.spareInfo`),
  },
  {
    code: "upKeepInfo",
    label: t(`page.dataV.quickEnterArr.upKeepInfo`),
  },
  {
    code: "alarmInfo",
    label: t(`page.dataV.quickEnterArr.alarmInfo`),
  },
  {
    code: "moldInfo",
    label: t(`page.dataV.quickEnterArr.moldInfo`),
  },
]);
/**
 * @Author: xzh
 * @Description: 加载弹框
 * @Param:
 * @param {*} code
 */
let initLayer = (code: string) => {
  quickEnterLayerRef.value.init(code);
};
</script>
<style lang="scss" scoped>
.quickEnter-container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: calc(var(--quickEnter-gap) * 2);
  row-gap: var(--quickEnter-gap);
  .dile-group-title {
    color: var(--font-color) !important;
    &:hover {
      cursor: pointer;
      color: var(--el-color-primary) !important;
    }
  }
  --quickEnter-gap: 0.5rem;
}
</style>
